<template>
<div class="chart">
    <VCharts :options="state.options"></VCharts>
</div>
</template>

<script>
import VCharts from "./VCharts.vue";
import {
    reactive,
    toRefs
} from "vue";
export default {
    name: "entriesChart",
    components: {
        VCharts
    },
    props: {
        data: {
            type: Object,
            required: true
        }
    },
    setup(props) {
        const state = reactive({
            options: getOptions(props.data)
        })
        return {
            state
        }
    }
}

function getOptions(data) {
    return {
        title: {
            text: "Performance性能耗时",
            textStyle: {
                fontSize: 26,
                color: '#2ec1ac'
            },
            left: "center",
            top: 10
        },
        color: ['#3398DB'],
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) {
                let color = params.color;
                let htmlStr = '<div>Performance性能耗时:<br/>';
                htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
                htmlStr += data[params.name].name + ': ' + params.value;
                htmlStr += '</div>';
                return htmlStr;
            }
        },
        xAxis: {
            type: 'category',
            data: Object.keys(data),
            axisTick: {
                alignWithLabel: true,
                lineStyle: {
                    color: "#999"
                }
            },
            axisLine: {
                lineStyle: {
                    color: "#999"
                }
            },
            axisLabel: {
                color: "#333"
            }
        },
        yAxis: {
            type: "value",
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    type: "dotted",
                    color: "#ddd"
                }
            }
        },
        series: [{
            name: 'performance耗时',
            type: 'bar',
            barWidth: '60%',
            data: Object.values(data).map(item => item.time)
        }]
    }
}
</script>

<style lang="scss" scoped>
.chart {
    width: 60%;
    height: 500px;
}
</style>
